<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="./nav.css" rel="stylesheet">
    <title>Document</title>
</head>

<body>
    <template id="sub-nav">
        <ul class="sub-nav">
            <li v-for="item in listData" class="menu2">
                <a>{{item.title}}</a>
            </li>
        </ul>     
    </template>

    <template id="header-nav">
        <nav class="header-nav">
            <ul class="container menu-box">
                <li v-for="item in listData" class="menu1">
                    <a>{{item.title}}</a>
                    <sub-nav v-if="item.subList != null" :list-data="item.subList"></sub-nav>
                </li>
            </ul>
        </nav>
    </template>
    <main id="app">
        <header-nav></header-nav>
    </main>
</body>
<script src="../../vue.js"></script>
<script src="./components.js"></script>
<script>
    new Vue({
        el: "#app"
    })
</script>
</html>